<template>
  <div class="hellocom">
    <button @click="show()">点击，{{isShow?'隐藏':'显示'}}数据</button>
    <ul v-show="isShow">
      <li v-for="item in list" :key="item.id">
        {{item.id}}——{{item.goodName}}
      </li>
    </ul>
  </div>
</template>

<script setup>
// 引入pinia设置响应式数据的函数，类似于ref，需要读取value
import {storeToRefs} from 'pinia'
// 导入需要的pinia模块
import {useDatalistStore} from '@/store'
const store = useDatalistStore();

// 直接获取store的数据state，用storeToRefs设置成响应式数据
let {list,isShow} = storeToRefs(store);

// 调用store的actions函数
store.getListData();

// 点击事件
const show=()=>{
  // 调用actions函数，并将其当前布尔型状态的参数传递过去
  store.setIsShow(!isShow.value)
}
</script>

<style scoped>
.hellocom{
  width: 80%;
  margin: 20px auto;
}
.hellocom button{
  width: 200px;
  line-height: 35px;
  border: none;
  background-color: orange;
  color: white;
  border-radius: 6px;
}
.hellocom ul{
  width: 100%;
  margin-top: 20px;
}
</style>